<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <breadcrum>评论管理</breadcrum>
    </div>
    <!-- 表格开始位置 -->
    <el-table
      :data="Comments"
      style="width: 100%">
      <el-table-column
        label="标题"
        width="640">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="总评论数"
        width="260">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.total_comment_count }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="粉丝评论数"
        width="260">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.fans_comment_count }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="评论状态"
        width="260">
        <template slot-scope="scope">
          <el-tag :type="scope.row.comment_status|commentStyle">{{scope.row.comment_status|commentText}}</el-tag>
        </template>
      </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="normal" @click="handleToggle(scope.row)" v-if="scope.row.comment_status">关闭</el-button>
          <el-button size="mini" type="warning" @click="handleToggle(scope.row)" v-else>打开</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 20px"
      @current-change = 'pageChange'
      background
      layout="prev, pager, next"
      :total="1000">
    </el-pagination>
  </el-card>
</template>

<script>
export default {
  data () {
    return {
      Comments: [],
      page: 1
    }
  },
  methods: {
    async handleToggle (row) {
      try {
        const res = await this.$axios({
          url: '/mp/v1_0/comments/status',
          method: 'put',
          params: {
            article_id: row.id.toString()
          },
          data: {
            allow_comment: !row.comment_status
          }
        })
        console.log('修改评论状态成功', res)
      } catch (err) {
        console.log(err)
      }
      row.comment_status = !row.comment_status
    },
    async loadComment () {
      try {
        const res = await this.$axios({
          url: '/mp/v1_0/articles',
          method: 'get',
          params: {
            response_type: 'comment',
            page: this.page,
            per_page: 10
          }
        })
        console.log('获取评论列表成功', res)
        this.Comments = res.data.data.results
      } catch (err) {
        console.log(err)
      }
    },
    pageChange (currentPage) {
      console.log('当前页码是', currentPage)
      this.page = currentPage
      this.loadComment()
    }
  },
  // 生命周期函数，进入页面即获取评论
  created () {
    this.loadComment()
  },
  // 过滤评论状态
  filters: {
    commentText (status) {
      const types = {
        true: '正常',
        false: '关闭'
      }
      return types[status]
    },
    commentStyle (status) {
      const types = {
        true: 'normal',
        false: 'warning'
      }
      return types[status]
    }
  }

}
</script>
